<style scoped>
    .content-box {
        height: 100%;
        background: #ffffff;
        position: relative;
    }

    .left {
        width: 140px;
        height: 100%;
        background: #eaedf1;
        border: 1px solid #bbbbbb;
    }

    .left__menu {
        color: #b5b3b5;
        line-height: 50px;
        font-size: 18px;
        border-bottom: 1px solid #bbbbbb;
        text-align: center;
        cursor: pointer;
    }

    .left__menu-big {
        font-size: 22px;
        line-height: 63px;
    }

    .left__menu--active {
        color: #3bc1a6;
    }

    .content {
        position: absolute;
        left: 140px;
        top: 0px;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
</style>
<template>
    <div class="content-box">
        <div class="left">
            <div class="left__menu left__menu-big">{{vo.title}}</div>
            <div class="left__menu" :class="{'left__menu--active':vo.active.id==menu.id}" v-for="menu in vo.menus"
                 @click="to(menu)"> {{menu.text}}
            </div>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import bus  from 'utils/bus'
    export default {
        data(){
            return {
                vo: {
                    menus: [],
                    title: '',
                    active: {}
                }
            }
        },
        computed: {},
        methods: {
            to(menu, replace = false){
                this.vo.active = menu
                if (replace) {
                    this.$router.replace(menu.router)
                } else {
                    this.$router.push(menu.router)
                }
            },
            init(parentMenu){
                this.vo.menus = parentMenu.children
                this.vo.title = parentMenu.text + '管理'
                if (parentMenu.children && parentMenu.children.length) {
                    this.to(parentMenu.children[0], true)
                }
            }
        },
        mounted(){
            let page = this.$parent
            while (page && page.$parent) {
                if (page.$vnode.tag.indexOf('tkb_index') > -1) {
                    break
                } else {
                    page = page.$parent
                }
            }
            let parentMenu = page.activeMenu
            this.init(parentMenu)

            bus.$on("selectMenu", (data)=> {
                this.init(data)
            })
        },
        destroyed(){
            bus.$off("selectMenu")
        },
        components: {},
        filters: {}
    }
</script>